<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社团变化</title>
    <link rel="stylesheet" href="/css/table1.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/map/js/china.js"></script>
    <link rel="icon" type="image/x-icon" href="software.png"/>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="software.png" width="auto" height="90">
        </div>
        <nav>
            <ul>
                <li><a href="index.html">MAP</a></li>
                <li><a href="TABLE.html">TABLE</a></li>
                <li><a href="gouwuche.html">SERVICE</a></li>
                <li><a href="MAP.html">HELP</a></li>
            </ul>
        </nav>
        <div class="language">
            <span>CN</span>EN
        </div>
    </div>
    <div style="display: flex; flex-wrap: nowrap;">
    <div class="tablebox" id="main" style="width: 1000px;height:800px;"></div>
    
    <script type="text/javascript">
         var myChart = echarts.init(document.getElementById('main'));
        var option1 = {
 title: {
 text: '社团成员数量变化',
 textStyle: {
        fontSize: 30 // 更改为您所需的字体大小
    }
 },
 tooltip: {},
 legend: {
    data: ['社团一', '社团二', '社团三', '社团四'],
    textStyle: {
        fontSize: 20 // 更改为您所需的字体大小
    }
  },
 xAxis: {
 data: ["2011","2012","2013","2014","2015","2016","2017","2018","2019"]
 },
 yAxis: {
    min:0
 },
 series: [
{
 name: '社团一',
 type: 'line',
 data: [100	,99	,91	,101	,82	,89,	99,101	,52],
 symbolSize: 17, // 控制数据点的大小
     lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
 },
{
    name:'社团二',
    type:'line',
    data:[58	,65	,65	,62,	61	,60	,65	,64	,63],
    symbolSize: 17, // 控制数据点的大小
     lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
},
{
 name: '社团三',
 type: 'line',
 data: [34	,39	,47	,46	,43	,54	,48,	42	,   50],
 symbolSize: 17, // 控制数据点的大小
     lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
 },
 {
 name: '社团四',
 type: 'line',
 data: [20	,8	,14	,0	,18	,0	,0	,0	,28],
 symbolSize: 17, // 控制数据点的大小
     lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
 }
]
 };
 var option2 = {
 title: {
 text: '社团贸易总额'
 },
 tooltip: {},
 legend: {
    data: ['社团一', '社团二', '社团三', '社团四']
  },
 xAxis: {
 data: ["2011","2012","2013","2014","2015","2016","2017","2018","2019"]
 },
 yAxis: {
    min: 0
 },
 series: [
{
 name: '社团一',
 type: 'line',
 data: [1.2	,1.05	,0.72	,1.08	,0.88	,0.61	,0.98	,1.18	,0.49
],
symbolSize: 17, // 控制数据点的大小
     lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
 },
{   name:'社团二',
    type:'line',
    data:[0.68	,0.79	,0.83	,0.78	,0.7	,0.61	,0.71	,0.72	,0.6
]},
{
 name: '社团三',
 type: 'line',
 data: [0.42	,0.32	,0.7	,0.6	,0.58	,0.78	,0.4	,0.31,	0.82
],
symbolSize: 17, // 控制数据点的大小
     lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
},
 {
 name: '社团四',
 type: 'line',
 data: [0.05	,0.11	,0.15	,0	,0.04	,0	,0,	0	,0.14
],
symbolSize: 17, // 控制数据点的大小
     lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
 },
 
]
 };
 
 function toggleChart(index) {
            if (index === 0) {
                myChart.setOption(option1);
            } else if (index === 1) {
                myChart.setOption(option2);
            }
        }
    toggleChart(0)
        </script>
        <div class="analyse" style="width: 600px;height: 400px;margin-top: 100px;">
            <p>社团演化分析</p>
            <article>
                <div class="part2">
                    <div class="text">
                        <h3><a href="">ANALYSE 👋🏾</a></h3>
             
                        <p class="custom-paragraph">IFTN的社团结构演化情况图所示，从中可以看出国际粮食贸易社团分布具有一定的地理特征，同时又突破地域限制，可以为缩短贸易距离和加快推进经济全球化进程提供一定的实证检验。从社团的成员规模演化可以看出，在大多数年份中社团1内的国家数量明显占优，包含100个国家左右，主要为太平洋国家，东亚和非洲国家；社团2内国家的数量维持在60个左右，主要表现为欧洲国家的经贸联合；社团3主要由美洲国家构成，成员数量相对稳定在40个左右；社团4的地域性相比其他社团不明显，且容易被别的社团吸纳。观察各个社团的贸易总量演化，发现除不稳定的社团4以外，其余社团的贸易总量波动明显，同各个社区的成员规模演化对比发现两者呈现一定的相关关系，与此同时，结合地理演化分析发现每一次社团贸易总量的剧烈波动都伴随着贸易强国的社团变动。</p>
                    </div>
    
                </div>
                
            </article>
    </div>
        </div>
        <div id="chartToggle" style="margin-left: 300px;">
            <input type="button" value="显示社团成员数量" onclick="toggleChart(0)">
            <input type="button" value="显示社团贸易总额" onclick="toggleChart(1)">
        </div>
</body>